<template>
  <button
    ref="_ref"
    class="timmy-button"
    :class="{
      [`timmy-button--${type}`]: type,
      [`timmy-button--${size}`]: size,
      'is-plain': plain,
      'is-round': round,
      'is-circle': circle,
      'is-disabled': disabled || loading
    }"
    :disabled="disabled || loading"
  >
    <Timmy-Icon icon="spinner" spin v-if="loading" />
    <Timmy-Icon :icon="icon" v-if="icon" />
    <span v-if="$slots.default">
      <slot />
    </span>
  </button>
</template>

<script setup lang="ts">
import { onMounted, withDefaults } from 'vue'
import type { ButtonProps } from '@/components/Button/props.ts'
const props = withDefaults(defineProps<ButtonProps>(), {
  type: 'default',
  plain: false,
  round: false,
  disabled: false,
  loading: false,
  icon: '',
  circle: false
});
onMounted(()=> {
  console.log("props", props)
})
</script>

<style scoped>

</style>
